<!--  -->
<template>
    <div style="height: 100%">
        <el-table ref="tableRef" :data="tableData" @selection-change="handleSelectionChange" height="100%" border stripe>
            <el-table-column type="selection" width="40" />
            <el-table-column type="index" label="序号" align="center" width="auto" />

            <el-table-column align="center" v-for="key in keys">
                <template #header>
                    <template v-if="unique">
                        <el-button @click="uniqueKeyChange(key)">分析变量</el-button>
                    </template>
                    <template v-else-if=multiple>
                        <el-button @click="multipleKeyChange(key)">分析变量</el-button>
                    </template>
                    <template v-else-if=custom>
                        <el-select size="small" placeholder="变量选择" @change="label=>customKeyChange(key,label)">
                            <el-option v-for="label in labels" :value="label" :label="label" />
                        </el-select>
                    </template>
                </template>

                <el-table-column :prop="key" :label="key" align="center" :label-class-name="headerClass(key)" />
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { computed, defineEmits, defineProps, ref, watch } from "vue"
import { ElMessage }                                      from "element-plus"

let props = defineProps({
    tableData: Array,
    unique   : { type: Boolean, default: false },
    multiple : { type: Boolean, default: false },
    limit    : { type: Number, default: null },
    custom   : { type: Boolean, default: false },
    labels   : Array,
})

let emits = defineEmits([ "change" ])

let tableRef = ref(null)
watch(() => props.tableData, () => {
    if(tableRef.value){
        tableRef.value.toggleAllSelection()
        selectedKeys.value = []
    }
})

let keys = computed(() => {
    if(!props.tableData){
        return []
    }
    if(props.tableData.length <= 0){
        return []
    }
    return Object.keys(props.tableData[0])
})

let labels_color = computed(() => {
    let custom_keys_color = [ "red_bg", "pink_bg", "blue_bg", "green_bg", "orange_bg" ]
    let obj               = {}
    props.labels.forEach((label, index) => {
        obj[label] = custom_keys_color[index]
    })
    return obj
})

let selectedKeys = ref([]) // 选择的key
let selectedList = ref([]) // table选择数据

function handleSelectionChange(list){
    selectedList.value = list
    change()
}

function uniqueKeyChange(key){
    selectedKeys.value = [ { key: key, label: "unique" } ]
    change()
}

function multipleKeyChange(key){
    const index = selectedKeys.value.findIndex(item => item.key === key)
    // 新加
    if(index === -1){
        if(props.limit){
            if(selectedKeys.value.length < props.limit){
                selectedKeys.value.push({ key: key, label: "multiple" })
            }
            else{
                ElMessage.warning("不可超过上限:" + props.limit)
            }
        }
        else{
            selectedKeys.value.push({ key: key, label: "multiple" })
        }
    }
    // 移除
    else{
        selectedKeys.value.splice(index, 1)
    }

    change()
}

function customKeyChange(key, label){
    const index = selectedKeys.value.findIndex(item => item.label === label)

    if(index !== -1){
        selectedKeys.value.splice(index, 1)
    }

    selectedKeys.value.push({ key: key, label: label })

    change()
}

function change(){
    let columnSelectedList = []
    if(selectedKeys.value.length === 0){
        columnSelectedList = []
    }
    else{
        selectedKeys.value.forEach(item => {
            columnSelectedList.push(
                {
                    key  : item.key,
                    label: item.label,
                    value: selectedList.value.map(row => row[item.key]),
                },
            )
        })
    }

    emits("change", columnSelectedList, selectedList.value)
}

function headerClass(key){
    const row = selectedKeys.value.find(item => item.key === key)
    if(props.unique){
        return row ? "red_bg" : "none"
    }

    if(props.multiple){
        return row ? "pink_bg" : "none"
    }

    if(props.custom){
        return labels_color.value[row?.label] || "none"
    }
}

</script>

<style lang="scss" scoped>
:deep(.el-table__header) {
    .red_bg {
        background-color: red !important;
        color: white;
    }

    .pink_bg {
        background-color: pink !important;
        color: black;
    }

    .blue_bg {
        background-color: cornflowerblue !important;
        color: black;
    }

    .green_bg {
        background-color: #64ed8f !important;
        color: black;
    }

    .orange_bg {
        background-color: #ed8964 !important;
        color: black;
    }
}

</style>
